<template>
  <AvicModal :title="title" :visible="true" width="520px" height="370px" :centered="true" @cancel="closeModal">
    <div class="select-file-box">
      <FileUpload
        ref="fileInput"
        v-model="file"
        input-id="inputFile"
        :timeout="timeout"
        :name="name"
        :post-action="baseURL"
        :headers="headers"
        :data="data"
        :multiple="false"
        :accept="accept"
        extensions="xml"
        :drop="true"
        @input-filter="inputFilter"
        @input-file="inputFile"
      >
        <inbox-outlined class="icon-inbox" />
        <span>点击或将文件拖拽到这里上传</span>
        <span class="text-describe">支持文件类型:xml文件大小不得超过 {{ fileSizeLimit }}MB</span>
      </FileUpload>
      <span v-if="file.length > 0" class="file-name-box">
        <paper-clip-outlined />
        <span class="file-name">{{ file[0].name }}</span>
        <a-popconfirm v-if="!$refs.fileInput.active" title="确认要删除选择的文件吗？" ok-text="确定" cancel-text="取消" @confirm="remove()">
          <close-outlined class="close-icon" />
        </a-popconfirm>
      </span>
    </div>
    <template #footer>
      <a-button type="primary" :loading="uploadLoading" @click="uploadFile">确认</a-button>
      <a-button type="primary" ghost title="返回" @click="closeModal">返回</a-button>
    </template>
  </AvicModal>
</template>
<script setup>
// 引入上传组件
import FileUpload from 'vue-upload-component/src/FileUpload.vue';
import { getToken, getCookie } from '@/utils/common-util';
import { TENANT_ID } from '@/store/user';

const { proxy } = getCurrentInstance();
/**
 * 组件回调事件
 * close 关闭回调
 */
const $emit = defineEmits(['close', 'back-import']);
const props = defineProps({
  /** 组件Modal标题 */
  title: {
    type: String,
    default: '导入'
  },
  /** 接口url */
  url: {
    type: String,
    required: true,
    default: ''
  },
  /** 接口请求参数 */
  data: {
    type: Object,
    default: null
  },
  /** 上传文件大小(MB) */
  fileSizeLimit: {
    type: Number,
    default: 10
  },
  /** 上传服务器文件名称 */
  name: {
    type: String,
    default: 'file'
  },
  /** 上传超时时间 */
  timeout: {
    type: Number,
    default: 60000
  },
  /** 浏览器文件选择框过滤 */
  accept: {
    type: String,
    default: 'text/xml'
  }
});

const file = ref([]); // 选择文件集合
const regexp = new RegExp('(.xml)$'); // 正则过滤文件类型
const uploadLoading = ref(false); // 导入状态
const fileInput = ref(); // 响应式的引用变量,用于访问文件上传组件实例
const newFileResponse = ref({}); // 请求接口的响应信息
const headers = ref({
  // 请求headers
  'X-Access-Token': getToken(),
  // 请求头中增加租户信息
  ...(getCookie(TENANT_ID) ? { 'X-Tenant-Id': getCookie(TENANT_ID) } : {})
});
// 请求url
const baseURL = computed(() => (proxy.$settings.axiosRequestConfig.baseURL || '/api') + props.url);
/** 关闭弹窗 */
function closeModal() {
  $emit('close');
}
/** 删除 */
function remove() {
  file.value = [];
}
/** 导入 */
function uploadFile() {
  if (fileInput.value && file.value.length > 0) {
    fileInput.value.active = true;
    if (newFileResponse.value) {
      $emit('back-import', newFileResponse.value);
    }
  } else {
    proxy.$message.warning('请选择要导入的xml文件！');
  }
}
/**
 * 选择文件过滤方法
 * @param {*} newFile 文件数据集合
 * @param {*} oldFile 旧文件数据集合
 * @param {*} prevent 回调函数
 */
function inputFilter(newFile, oldFile, prevent) {
  if (newFile && !oldFile) {
    // 验证上传文件类型
    if (!regexp.test(newFile.name)) {
      proxy.$message.warning('您选中的文件格式不符合要求！');
      return prevent();
    }
    // 验证最大上传文件
    if (newFile.size > 1024 * 1024 * props.fileSizeLimit) {
      proxy.$message.warning(`xml文件大小不得超过${props.fileSizeLimit}MB`);
      return prevent();
    }
  }
  return true;
}
/**
 * 文件上传中的过滤方法
 * @param {*} newFile 文件数据集合
 * @param {*} oldFile 旧文件数据集合
 */
function inputFile(newFile, oldFile) {
  newFileResponse.value = {};
  if (newFile && oldFile) {
    // 上传成功
    if (newFile.success !== oldFile.success) {
      uploadLoading.value = false;
      if (newFile.response) {
        $emit('back-import', newFile.response);
        newFileResponse.value = newFile.response;
      }
    }
  }
}
</script>
<style lang="less">
.select-file-box {
  width: 100%;
  position: relative;
  margin-top: 10px;
  .file-uploads {
    width: 100%;
    height: 180px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed #e8e8e8;
    line-height: 26px;
    .icon-inbox {
      font-size: 50px;
      color: #1890ff;
      display: block;
      margin: 30px 0 10px 0;
    }
    span.text-describe {
      display: block;
      color: rgba(0, 0, 0, 0.4);
      font-size: 12px;
    }
    .text-download {
      display: inline-block;
      color: #1890ff;
      font-size: 12px;
      cursor: pointer;
      z-index: 9999;
      position: relative;
    }
  }
  .file-name-box {
    height: 100%;
    width: 60%;
    line-height: 32px;
    overflow: hidden;
    .file-name {
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 5px;
    }
    .close-icon {
      float: right;
      height: 24px;
      line-height: 32px;
    }
  }
}
</style>
